<template>
  <div class="table-box">
    <ProTable ref="proTable" title="角色列表" row-key="id" :indent="30" :columns="columns" :request-api="accountList">
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="ChatLineSquare" @click="toDetail(scope.row.id)" v-auth="'detail'">
          {{ $t("common.detail") }}
        </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="menuMange">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ColumnProps } from "@/components/ProTable/interface";
import { accountList, accountEnable, accountDisable } from "@/api/modules/system";
import { ChatLineSquare } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { useHandleData } from "@/hooks/useHandleData";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
const { BUTTONS } = useAuthButtons();
const { t } = useI18n();
const proTable = ref();
const router = useRouter();

const statusEnum = [
  { label: t("common.normal"), value: 10 },
  { label: t("common.disable"), value: 20 },
  { label: t("common.lock"), value: 100 }
];

const toDetail = (id: number) => {
  router.push(`/system/account/detail/${id}`);
};
// 表格配置项
const columns: ColumnProps[] = [
  { prop: "id", label: "ID", width: 120 },
  { prop: "username", label: t("system.account.username"), search: { el: "input" } },
  { prop: "contact_name", label: t("system.account.contact_name"), search: { el: "input" } },
  { prop: "contact_tel", label: t("system.account.contact_tel"), search: { el: "input" } },
  { prop: "remarks", label: t("system.account.remarks") },
  { prop: "last_ip", label: t("system.account.last_ip") },
  { prop: "last_time", label: t("system.account.last_time") },
  {
    prop: "status",
    label: t("common.status"),
    width: 100,
    search: { el: "select" },
    enum: statusEnum,
    render: scope => {
      return (
        <>
          {BUTTONS.value.status ? (
            <el-select v-model={scope.row.status}>
              <el-option
                value={statusEnum[0].value}
                disabled={statusEnum[0].value == scope.row.status}
                label={statusEnum[0].label}
                onClick={() => {
                  changeStatus(scope.row, statusEnum[0].value);
                }}
              />
              <el-option value={statusEnum[1].value} disabled={true} label={statusEnum[1].label} />
              <el-option
                value={statusEnum[2].value}
                disabled={statusEnum[2].value == scope.row.status}
                label={statusEnum[2].label}
                onClick={() => {
                  changeStatus(scope.row, statusEnum[2].value);
                }}
              />
            </el-select>
          ) : (
            <el-tag type={scope.row.status == 10 ? "success" : "danger"}>
              {scope.row.status == 10 ? t("common.normal") : t("common.disable")}
            </el-tag>
          )}
        </>
      );
    }
  },
  { prop: "operation", label: t("common.operation"), width: 250, fixed: "right" }
];

const changeStatus = async (item, status) => {
  item.status = item.status = status;
  let message = "";
  let api = null;
  switch (status) {
    case statusEnum[0].value:
      api = accountEnable;
      message = "启用账户";
      break;
    case statusEnum[2].value:
      api = accountDisable;
      message = "禁用账户";
      break;
    default:
      ElMessage.error(t("common.abnormal"));
      return;
  }

  await useHandleData(api, item, message);
  proTable.value.getTableList();
};
</script>
